<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关于我们</title>
  
    <!-- 这里导入 bootstrap的 css文件-->
  <link rel="stylesheet" href="/media/css/aboutus.css">
  <link rel="stylesheet" href="/media/css/bootstrap-off-canvas-nav.css">
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <!-- 这里导入jqeury的js文件  和  bootstrap的 js文件-->
  <!-- src属性 可以规定显示图像的 URL（图片所在的路径） -->
  <!-- alt属性 可以规定图像的替代文本（当图片无法正常显示或填写的路径位置有错时,这时它的作用就是替代文本） -->
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="/static/js/bootstrap-off-canvas-nav.js"></script>
 <script src="/static/js/gsap.min.js"></script>
  <script src="/static/js/ScrollTrigger.min.js"></script>
<body>
  <header>
    <a href="#" class="logo">关于我们</a>
  </header>

  <section class="parallax">
    <h2 id="text"><b>开发人员介绍</b></h2>
	 
    <img src="/media/aboutus/monutain_01.png" id="m1">
    <img src="/media/aboutus/trees_02.png" id="t2">
    <img src="/media/aboutus/monutain_02.png" id="m2">
    <img src="/media/aboutus/trees_01.png" id="t1">
    <img src="/media/aboutus/man.png" id="man">
    <img src="/media/aboutus/plants.png" id="plants">
  </section>
  <section class="sec">
   <h2>小组成员介绍</h2>
    <!-- <p>等会再加吧<br><br>饿了嘿嘿</p> -->
	
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<!-- container用于固定宽度并支持响应式布局的容器 -->
		<div class="container ">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
					data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<!-- <a style="background-color: #aa0000" class="navbar-brand" href="#" id="nav_brand_a"> -->
				<a class="navbar-brand" href="#" id="nav_brand_a">
					<b><u>实时视频入侵监测系统</u></b><!-- 首页顶部第一个;加粗b+下划线u -->
				</a>
			</div>
		</div><!-- /.container-fluid -->
	
	</nav>
	
<!-- 	<div class="row">
		<div class="col-md-8 col-md-offset-2 ">
			<div class="page-header text-center">
				<h1>本项目开发人员介绍</h1>
				<p></p>
			</div>
		</div>
	</div> -->
	
	<div class="row" style="margin-left: 250px">
		<div class="col-sm-6 col-md-4">
			<div class="thumbnail" style="width: 250px">
				<div class="caption" style="width: 150px">
					<h3>杨亚菲</h3>
					<h4>组长</h4>
					<!-- <p>少年欲向上</p> -->
					<h5>少年欲向上</h5>
					<!-- E:\code\monitoring\photo\aboutus -->
					<img height="200" width="200" src="/media/aboutus/yyf.jpg" alt="...">
				</div>
			</div>
		</div>
	
		<div class="col-sm-6 col-md-4">
			<div class="thumbnail" style="width: 250px">
				<div class="caption" style="width: 150px">
					<h3>刘欣悦</h3>
					<h4>项目经理</h4>
					<h5>好想睡觉QAQ</h5>
					<img height="200" width="200" src="/media/aboutus/lxy.jpg" alt="...">
				</div>
			</div>
		</div>
	
		<div class="col-sm-6 col-md-4">
			<div class="thumbnail" style="width: 250px">
				<div class="caption" style="width: 150px">
					<h3>刘培钰</h3>
					<h4>测试</h4>
					<h5>酒满撒繁星</h5>
					<img height="200" width="200" src="/media/aboutus/lpy.jpg" alt="...">
				</div>
			</div>
		</div>
	
		<div class="col-sm-6 col-md-4">
			<div class="thumbnail" style="width: 250px">
				<div class="caption" style="width: 150px">
					<h3>葛菲</h3>
					<h4>产品经理</h4>
					<h5>lucky</h5>
					<img height="200" width="200" src="/media/aboutus/gf.jpg" alt="...">
				</div>
			</div>
		</div>
	
		<div class="col-sm-6 col-md-4">
			<div class="thumbnail" style="width: 250px">
				<div class="caption" style="width: 150px">
					<h3>宿嘉璐</h3>
					<h4>产品经理</h4>
					<h5>殇</h5>
					<img height="200" width="200" src="/media/aboutus/sjl.jpg" alt="...">
				</div>
			</div>
		</div>
	
		<div class="col-sm-6 col-md-4">
			<div class="thumbnail" style="width: 250px">
				<div class="caption" style="width: 150px">
					<h3>刘家璇</h3>
					<h4>测试</h4>
					<h5>吉他熊</h5>
					<img height="200" width="200" src="/media/aboutus/ljx.jpg" alt="...">
				</div>
			</div>
		</div>
	</div>
	
	<hr>
	<div class="footer">
		<div class="container">
			<div class="row  footer-top">
				<div class="col-md-6">
					<h2 style="color:#ffffff; font-size:35px">
						<img src="/media/images/logo1.png" alt="实时视频入侵监测系统" width="100px">实时视频入侵监测系统
					</h2>
					<!-- <p>实时视频入侵监测系统致力于</p> -->
				</div>
	
				<div class="col-md-6">
					<div class="row about" id="about">
						<div class="col-xs-6">
							<h6 style="color:#ffffff; font-size:24px">联系方式</h6>
							<br>
							<ul class="list-unstyled">
								<li><a href="">邮箱: 21301100@bjtu.edu.cn</a></li>

								<br>
								<li><a href="">电话: 18580885751</a></li>
							</ul>
						</div>
	
						<div class="col-xs-6">
							<!-- <h4>特别致谢</h4><br> -->
							<ul class="list-unstyled">
								<!-- 1.8超链接标签: -->
								<!-- <a href="跳转目标" target="目标窗口的弹出方式"></a> -->
								<!-- <li><a href="">21301100@bjtu.edu.cn</a></li> -->
								<br>
								<!-- <li><a href="">18580885751</a></li> -->
							</ul>
						</div>
					</div>
				</div>
				<hr>
			</div>
		</div>
	</div>
	
  </section>
<!-- <script src="static/js/gsap.min.js"></script>
  <script src="static/js/ScrollTrigger.min.js"></script> -->
  
  
  <script>
    gsap.from('#m1', {
      scrollTrigger:{
        scrub: true
      },
      y: 100,
    })
    gsap.from('#m2', {
      scrollTrigger:{
        scrub: true
      },
      y: 50,
    })
    gsap.from('#t2', {
      scrollTrigger:{
        scrub: true
      },
      x: -50,
    })
    gsap.from('#t1', {
      scrollTrigger:{
        scrub: true
      },
      x: 50,
    })
    gsap.from('#man', {
      scrollTrigger:{
        scrub: true
      },
      x: -200,
    })
    gsap.from('#plants', {
      scrollTrigger:{
        scrub: true
      },
      x: -50,
    })
    gsap.from('#text', {
      scrollTrigger:{
        scrub: true
      },
      x:450,
    })
  </script>
</body>
</html>